<!DOCTYPE html>
<html lang="en">
<head>
    <title>考勤报表管理层</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=4a6c1b54">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
</head>
<body>
<section class="content"  id="app">
    <div class="nav-tabs-custom oaReportNav">
        <!-- Tabs within a box -->
        <ul class="nav nav-tabs pull-right" style="margin-bottom: 10px;">
            <li class="active"><a href="#revenue-chart" data-toggle="tab">今天</a></li>
            <li><a href="#sales-chart" data-toggle="tab">本月</a></li>
            <li v-for="(item,i) in months"><a href="#sales-chart" data-toggle="tab">{{item}}</a></li>
        </ul>

    </div>
    <div class="row">
    <div class="col-lg-6 col-xs-6">
        <div class="infoReport"><i></i>面访：目标（{{reportVisit.faceInfo.targetDay?reportVisit.faceInfo.targetDay:"0"}}）,完成（{{reportVisit.faceInfo.finishDay?reportVisit.faceInfo.finishDay:"0"}}）</div>
        <table class="table table-hover table-bordered text-center ">
        <thead><tr>
            <th style="width:80px">面访排名</th>
            <th style="width:80px">区域经理</th>
            <th style="width:60px">目标</th>
            <th style="width:60px">完成</th>
            <th style="width:60px">出勤天数</th>
            <th style="width:60px">日均完成</th>
            <th style="width:60px">大区经理</th>
            <th style="width:60px">大区</th>
            <th>区域</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(item,i) in reportVisit.faceTargets"><td>{{item.rank}}</td><td style="color:#169BD5;cursor: pointer"  @click="lookInterview">{{item.name}}</td><td >{{item.targetDay}}</td><td>{{item.finishDay}}</td><td>{{data.signDay}}</td><td>{{item.daily}}</td><td>{{item.user2Name}}</td><td>{{item.region2Name}}</td><td>{{item.regionName}}</td></tr>
        </tbody>
    </table></div>
    <div class="col-lg-6 col-xs-6">
        <div class="infoReport"><i></i>电访：目标（{{reportVisit.telInfo.targetDay?reportVisit.telInfo.targetDay:"0"}}）,完成（{{reportVisit.telInfo.finishDay?reportVisit.telInfo.finishDay:"0"}}）</div>
        <table class="table table-hover table-bordered text-center ">
        <thead><tr>
            <th style="width:80px">电访排名</th>
            <th style="width:80px">区域经理</th>
            <th style="width:60px">目标</th>
            <th style="width:60px">完成</th>
            <th style="width:60px">出勤天数</th>
            <th style="width:60px">日均完成</th>
            <th style="width:60px">大区经理</th>
            <th style="width:60px">大区</th>
            <th>区域</th>

        </tr>
        </thead>
        <tbody>
        <tr  v-for="(item,i) in reportVisit.telTargets"><td>{{item.rank}}</td><td style="color:#169BD5;cursor: pointer"  @click="lookInterview">{{item.name}}</td><td >{{item.targetDay}}</td><td>{{item.finishDay}}</td><td>{{data.signDay}}</td><td>{{item.daily}}</td><td>{{item.user2Name}}</td><td>{{item.region2Name}}</td><td>{{item.regionName}}</td></tr>
        </tbody>
    </table></div>
    </div>
    <div class="row">
        <div id="container" class="col-lg-6 col-xs-6" style="height: 400px; margin: 0 auto"></div>
        <div id="container2" class="col-lg-6 col-xs-6" style="height: 400px; margin: 0 auto"></div>
    </div>

    <!-- /.box-body -->
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=602456c3"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=6348cbbc"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/highcharts/highcharts.js"></script>
<script type="text/javascript">
    console.log(urlConfig);
    var app = new Vue({
        el:'#app',
        data:{
            currentUser:getCurrentUser(),
            reportVisit:{
                faceInfo:{
                    "finishDay": 0,
                    "targetDay": 0},
                telInfo:{
                    "finishDay": 0,
                    "targetDay": 0
                }
            },
            time:"",
            readerName:"",
            months:[]
        },
        methods:{
            lookInterview:function(){
                var id="0";
                $.dialog({
                    content: 'url:interviewTwo.html?id=' + id + "&t=" + new Date(),
                    title: '面访-列表-个人',
                    width: 1100,
                    height: 450,
                    max: true,
                    min: true,
                    lock: true
                });
            },
            getLastEndMonth:function(beginYearMonth){
                var strYear = parseInt(beginYearMonth.substr(0,4),10);
                var strMonth = parseInt(beginYearMonth.substr(4,6),10);
                if(strMonth - 1 == 0){
                    strYear -= 1;
                    strMonth = 12;
                } else {
                    strMonth -= 1;
                }
                if(strMonth<10){
                    strMonth="0"+strMonth;
                }
                var monthstr = strYear+""+strMonth;
                return monthstr;
            },
            getMonths:function () {
                var that=this;
                var dateTime=new Date().Format("yyyyMM");
                for(var i=0;i<5;i++){
                    dateTime=that.getLastEndMonth(dateTime);
                    that.months.push(that.insert_flg(dateTime,"-","4"))
                }
                console.log(that.months)
            },
            insert_flg:function (str,flg,sn) {
                var newstr="";
                for(var i=0;i<str.length;i+=sn){
                    var tmp=str.substring(i, i+sn);
                    console.log(tmp)
                    newstr+=tmp+flg;
                }
                newstr = newstr.substr(0,newstr.length-1);
                return newstr;
            }
        },
        mounted:function () {
            //获取前5个月
            this.getMonths();

            var that=this;
            var userId=getCurrentUser().id;
            var companyId=getCurrentUser().companyId;
            var dateTime=new Date().Format("yyyy-MM-dd");
            $.wyui.postMethod(urlConfig.crm.customer.getRegionByManage,{
                "userId":userId,"dateTime":dateTime,"companyId":companyId
            },function (map) {
                console.log(map);
                that.reportVisit= map;
            },true);
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                legend: {
                    align: 'right', //水平方向位置
                    verticalAlign: 'top', //垂直方向位置
                    floating:true,
                    x: 0, //距离x轴的距离
                    y: 10 //距离Y轴的距离
                },
                credits: { enabled: false },
                title: {
                    text: '电访数量'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories:that.reportVisit.telName,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数量 (个)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}:{point.y}</span><table>',
                    pointFormat: '',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '电访',
                    data:that.reportVisit.telValue
                }]
            });
            Highcharts.chart('container2', {
                chart: {
                    type: 'column'
                },
                colors: ['#96d4a3'],
                credits: { enabled: false },
                legend: {
                    align: 'right', //水平方向位置
                    verticalAlign: 'top', //垂直方向位置
                    floating:true,
                    x: 0, //距离x轴的距离
                    y: 10 //距离Y轴的距离
                },
                title: {
                    text: '面访数量'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories:that.reportVisit.faceName,
                    crosshair: true
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '数量 (个)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}:{point.y}</span><table>',
                    pointFormat: '',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '面访',
                    data:that.reportVisit.faceValue
                }]
            });

            $("body").delegate(".nav-tabs li", "click", function () {
                var dateTime=$(this).find("a").text();
                if(dateTime=="今天"){
                    dateTime=new Date().Format("yyyy-MM-dd");
                }else if(dateTime=="本月"){
                    dateTime=new Date().Format("yyyy-MM");
                }else{
                }
                $.wyui.postMethod(urlConfig.crm.customer.getRegionByManage,{
                    "userId":userId,"dateTime":dateTime,"companyId":companyId
                },function (map) {
                    console.log(map);
                    that.reportVisit= map;
                });
            })
        }
       
    });
</script>

</body>
</html>